<template>
  <div class="demo-app">
    <div class="demo-app-top">
      <button @click="toggleWeekends">toggle weekends</button>
      <button @click="gotoPast">go to a date in the past</button>
      (also, click a date/time to add an event)
    </div>
    <!-- ds -->
    <!-- :event-limit="3" -->
    <!-- <FullCalendar
      ref="fullCalendar"
      class="demo-app-calendar"
      :default-view="defaultView"
      :header="header"
      :locale="locale"
      :height="height"
      :default-date="defaultDate"
      :plugins="calendarPlugins"
      @dateClick="handleDateClick"
      @dayRender="handleDayRender"
    /> -->
    <div id="calendar" />
  </div>
</template>

<script>
// import FullCalendar from '@fullcalendar/vue'
import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  name: 'calendar2',
  // components: {
  //   FullCalendar // make the <FullCalendar> tag available
  // },
  data: function() {
    const eventsData = []
    for (let i = 0; i < 20; i++) {
      const sd = this.moment('2019-08-20').add(i, 'days')
      eventsData.push({ title: '夜班', start: sd.format('YYYY-MM-DD 00:00:00'), end: sd.format('YYYY-MM-DD  07:59:59'), backgroundColor: '#fde2e2' })
      eventsData.push({ title: '白班', start: sd.format('YYYY-MM-DD 08:00:00'), end: sd.format('YYYY-MM-DD  15:59:59'), backgroundColor: '#ebeef5' })
      eventsData.push({ title: '中班', start: sd.format('YYYY-MM-DD 16:00:00'), end: sd.format('YYYY-MM-DD  23:59:59'), backgroundColor: '#e1f3d8' })
    }
    return {
      config: {
        defaultView: 'dayGridMonth',
        header: {
          left: 'prev,next',
          center: 'title',
          right: false
        },
        locale: 'zh-cn',
        showNonCurrentDates: true,
        weekends: true,
        height: 'auto',
        aspectRatio: 2,
        // defaultDate: '2019-09-22',
        // now: '2019-09-22',
        // validRange: {
        //   start: '2019-08-20',
        //   end: '2019-09-25'
        // },
        // visibleRange: {
        //   start: '2019-08-20',
        //   end: '2019-09-25'
        // },
        allDayText: 'hahhaha',
        plugins: [ // plugins must be defined in the JS
          dayGridPlugin
        ],
        events: eventsData
      }
    }
  },
  mounted() {
    const calendar = new Calendar(this.$('#calendar')[0], {
      ...this.config
    })
    calendar.render()
  },
  methods: {
    handleDayRender(date, cell) {
      console.log('handleDayRender', date, cell)
    },
    toggleWeekends() {
      this.config.weekends = !this.config.weekends // update a property
    },
    gotoPast() {
      // const calendarApi = this.$refs.fullCalendar.getApi() // from the ref="..."
      // calendarApi.gotoDate('2019-09-01') // call a method on the Calendar object
    },
    handleDateClick(arg) {
      console.log('handleDateClick', arg)
      // this.calendarEvents.push({ // add new event data
      //   title: 'New Event',
      //   start: arg.date,
      //   allDay: arg.allDay
      // })
    }
  }
}
</script>

<style lang="scss">
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
.demo-app {
  .fc-row .fc-content-skeleton{
    padding-bottom: 0px;
  }
  .fc-event-container{
    .fc-day-grid-event{
      display: block;
      height: 60px;
      color: #606266;
      border: 0px;
      border-top: 1px solid #dcdfe6;
      border-radius: 0px;
      margin: 0px;
      padding: 0px;
    }
  }
}
</style>

<style lang='scss' scoped>
// you must include each plugins' css
// paths prefixed with ~ signify node_modules

.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.demo-app-top {
  margin: 0 0 3em;
}
.demo-app-calendar {
  margin: 0 auto;
  max-width: 900px;
}

</style>
